import React from 'react';
// import '../../static/tero/common.less';
// import '../../static/tero/circle.less'
import Navv from './nav.jsx';
import u from '../../common.js'
import '../../static/tero/postbar.less';
import { message } from 'antd';


class Abroad extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            names: [],
            flag: true,
            index: 0,
            search: [{ src: "../../static/image/tou_fifty.png", title: '宋中继' }, { src: "../../static/image/tou_fifty.png", title: '王小筱' }, { src: "../../static/image/tou_fifty.png", title: '鲁达' }, { src: "../../static/image/tou_fifty.png", title: '宋中继' }, { src: "../../static/image/tou_fifty.png", title: '钱度' }, { src: "../../static/image/tou_fifty.png", title: '李四' },],
            base: [],
            block: 0,
            myname: '添加微信号',
            mynumber: 11,
            startTime: u.getDate(9, false),
            endTime: u.getDate(9, true),
            size: 10,
            page: 1,
            filter: [],
            source: '',
        }
    }

    componentWillMount() {
        this.getNameList()

    }
    open(index) {
        let arr = this.state.base.slice(0)
        arr[index].flag = !arr[index].flag
        this.setState((prevState, props) => ({
            base: arr
        }))
    }
    publicnumder(flag) {
        let data = {
            "page": this.state.page,
            "size": this.state.size,
            sort: '11',
            author_id: this.state.source,

        };
        u.instragramPage(data, (data) => {
 
            let list = data.data
            list.forEach((item) => {
                item.flag = false
            })
            let arr = flag ? this.state.base.slice(0).concat(list) : list
            this.setState((prevState, props) => ({
                base: arr,
                size: list.length,
            }))
        })
    }
    add() {
        this.state.size == 10 ?
            this.setState((prevState, props) => ({
                page: this.state.page + 1
            }), () => {
                this.publicnumder(true)
            }) : message.success( '没有更多数据了', [1], )
    }
    blockContent(index, val) {  //导航点击后的回调
        if (val || val == '') {
            let arr = []; 
            this.state.names.forEach(item=>{
                arr.push(item.user)
            })
            this.setState((prevState, props) => ({
                filter: arr.filter((item) => {
                    return item.includes(val)
                })
            }))
        } else {
            this.setState((prevState, props) => ({
                block: index,
                page: 1,
                size: 10,
                source: this.state.names[index].user_id,
            }), () => {
                this.publicnumder(false)
            })
        }
    }
    getNameList() { //获取导航列表
        u.instragram({ website_type: this.props.website_type }, data => {
            let arr = []
            if (data.data.length == 0) return;
            data.data.forEach((item) => {
                arr.push(item.user)
            })
            this.setState((prevState, props) => ({
                names: data.data,
                filter: arr,
                source: data.data[0].user_id
            }), () => {
                this.publicnumder(false)
            })
        })
    }
    render() {
        return (
            <div className='tero_father'>
                <Navv names={this.state.names} blockContent={this.blockContent.bind(this)} mynumber={this.state.mynumber} top={this.state.top} filter={this.state.filter} />
                <div className='nav_bb'>
                    <div className='postbar'>
                        <div className='nav_b_left nav_bc_left' style={{ height: '100%' }}>
                            <div className='nav_b_left_content' style={{ display: 'block' }}>
                                {
                                    this.state.base.length > 0 && this.state.base.map((item, index) => {
                                        return (
                                            <div className='nav_b_left_son' key={index}>
                                                <div className='nav_b_left_t'>{
                                                    item.display_url? (item.display_url.includes('http') ? <img src={require('../../static/image/tou_two.png')} alt="" /> : <img src={u.imgurl + item.display_url} alt="" style={{width: '720px'}}/>) : ''
                                                }</div>
                                                <div className='nav_b_left_t_son'><span>{item.author || '宋中继'}</span><br />{item.content || '美国科技企业越来越多地提出如下疑问? '}<br /><span>{u.unixTime(item.addTime) || '2018-07-30 22:13'}</span><br />
                                                    <div className='good'><img src={require('../../static/image/good.png')} alt="" style={{ height: '25px', width: '25px' }} />{item.likes_number}人觉得很赞</div>
                                                    <div className='goog' onClick={() => {
                                                        this.open(index)
                                                    }}>{item.flag ? '收起' : '展开'}剩余{item.comment_number}条评论<span className={item.flag ? 'commentTop' : ''}>→</span></div>
                                                    <ul className={item.flag ? "comment" : ""}>
                                                        {
                                                            item.comments.map((item, index) => {
                                                                return (<li key={index}><div className='nav_b_left_t'><img src={require('../../static/image/tou_three.png')} alt="" /></div>
                                                                    <p><span>{item.username || '鲁达'}</span><br />{item.comment_text || '问如果没有中国庞大市场的支撑随着美国政府贸易保护主义的不断加码?'}<br /><span>{u.unixTime(item.addTime) || '2018-07-30 22:13'}</span></p></li>)
                                                            })

                                                        }
                                                    </ul>
                                                </div>
                                            </div>
                                        )
                                    })
                                }
                                <div className='add' onClick={() => {
                                    this.add()
                                }}><span>查看更多>></span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}




export default Abroad